<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <navigation />

          <el-button
            @click="dataInform()"
            type="primary"
            style="float:right;"
            size="small"
            >通知</el-button
          >
          <el-button
            @click="setLv()"
            type="primary"
            style="float:right;margin-right:20px"
            size="small"
            >统一修改绿灯</el-button
          >
        </span>
        <el-button
          type="primary"
          style="float: right;"
          size="small"
          @click="showtable"
          v-show="false"
          >目标任务数据分析表</el-button
        >
      </div>
      <!-- 柱状图 -->
      <el-dialog
        center
        top="20px"
        title="目标任务数据分析表"
        :visible.sync="dialogVisibles"
        width="850px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <div style="text-align:center;margin-bottom:30px">
          <el-select
            class="userIntSize"
            v-model="quarter"
            clearable
            placeholder="请选择季度"
            @change="changeSelsct"
          >
            <el-option
              v-for="item in quarterLists"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div id="YmyChart"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <div class="list" id="taskScore">
        <!-- <el-scrollbar class="page-component__scroll" style="height:100%"> -->
        <div style="height:700px;">
          <el-table
            :header-cell-style="{ background: '#f5f5f5' }"
            border
            :data="tableData"
            style="width: 100%"
            height="700px"
            size="small"
            row-key="id"
            :tree-props="{ children: 'subtasks', hasChildren: 'hasChildren' }"
          >
            <el-table-column
              align="center"
              label="操作"
              fixed="left"
              width="120"
            >
              <template
                slot-scope="scope"
                v-if="!scope.row.subtasks || scope.row.subtasks.length == 0"
              >
                <el-button
                  type="text"
                  @click="dataWarnings(scope.row)"
                  >预警亮灯设置</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="160"
              prop="targetName"
              fixed="left"
              label="目标任务名称"
            ></el-table-column>

            <el-table-column
              align="center"
              width="160"
              fixed="left"
              label="领导小组"
            >
              <template>{{ departmentName }}</template>
            </el-table-column>
            <el-table-column align="center" label="一季度">
              <el-table-column
                align="center"
                width="50"
                prop="oneQuarterNumber"
                label="任务量"
              ></el-table-column>
              <el-table-column align="center" width="100" label="实际完成量">
                <template slot-scope="scope">
                  {{ scope.row.oneQuarterDegree }}
                  <el-popover
                    placement="top-start"
                    title="进度描述"
                    width="200"
                    trigger="click"
                    :content="scope.row.oneQuarterDegreeDescription"
                  >
                    <el-button slot="reference" class="describe"
                      >描述</el-button
                    >
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" label="本季度完成率">
                <template slot-scope="scope">{{
                  decimal(scope.row.degree1)
                }}</template>
              </el-table-column>
              <el-table-column align="center" label="全年目标完成率">
                <template slot-scope="scope">{{
                  decimal(scope.row.allDegree1)
                }}</template>
              </el-table-column>

              <el-table-column align="center" width="60" label="预警亮灯">
                <template slot-scope="scope">
                  <img :src="dataLamp(scope.row.oneQuarterDegreeCaveat)" />
                </template>
              </el-table-column>

              <el-table-column align="center" width="60" label="审核状态">
                <template slot-scope="scope">{{
                  degreeStatus(scope.row.oneQuarterDegreeStatus)
                }}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="二季度">
              <el-table-column
                align="center"
                width="50"
                prop="twoQuarterNumber"
                label="任务量"
              ></el-table-column>
              <el-table-column align="center" width="100" label="实际完成量">
                <template slot-scope="scope">
                  {{ scope.row.twoQuarterDegree }}
                  <el-popover
                    placement="top-start"
                    title="进度描述"
                    width="200"
                    trigger="click"
                    :content="scope.row.twoQuarterDegreeDescription"
                  >
                    <el-button slot="reference" class="describe"
                      >描述</el-button
                    >
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" label="本季度完成率">
                <template slot-scope="scope">{{
                  decimal(scope.row.degree2)
                }}</template>
              </el-table-column>
              <el-table-column align="center" label="全年目标完成率">
                <template slot-scope="scope">{{
                  decimal(scope.row.allDegree2)
                }}</template>
              </el-table-column>
              <el-table-column align="center" width="60" label="预警亮灯">
                <template slot-scope="scope">
                  <img :src="dataLamp(scope.row.twoQuarterDegreeCaveat)" />
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="审核状态">
                <template slot-scope="scope">{{
                  degreeStatus(scope.row.twoQuarterDegreeStatus)
                }}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="三季度">
              <el-table-column
                align="center"
                width="50"
                prop="threeQuarterNumber"
                label="任务量"
              ></el-table-column>
              <el-table-column align="center" width="100" label="实际完成量">
                <template slot-scope="scope">
                  {{ scope.row.threeQuarterDegree }}
                  <el-popover
                    placement="top-start"
                    title="进度描述"
                    width="200"
                    trigger="click"
                    :content="scope.row.threeQuarterDegreeDescription"
                  >
                    <el-button slot="reference" class="describe"
                      >描述</el-button
                    >
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" label="本季度完成率">
                <template slot-scope="scope">{{
                  decimal(scope.row.degree3)
                }}</template>
              </el-table-column>
              <el-table-column align="center" label="全年目标完成率">
                <template slot-scope="scope">{{
                  decimal(scope.row.allDegree3)
                }}</template>
              </el-table-column>
              <el-table-column align="center" width="60" label="预警亮灯">
                <template slot-scope="scope">
                  <img :src="dataLamp(scope.row.threeQuarterDegreeCaveat)" />
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="审核状态">
                <template slot-scope="scope">{{
                  degreeStatus(scope.row.threeQuarterDegreeStatus)
                }}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="全年">
              <el-table-column
                align="center"
                width="50"
                prop="allNumber"
                label="任务量"
              ></el-table-column>
              <el-table-column align="center" width="100" label="实际完成量">
                <template slot-scope="scope">
                  {{ scope.row.allDegree }}
                  <el-popover
                    placement="top-start"
                    title="进度描述"
                    width="200"
                    trigger="click"
                    :content="scope.row.allDegreeDescription"
                  >
                    <el-button slot="reference" class="describe"
                      >描述</el-button
                    >
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="本季度完成率">
                <template slot-scope="scope"
                  >{{ decimal(scope.row.degree4) }}
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="全年目标完成率">
                <template slot-scope="scope">{{
                  decimal(scope.row.allDegree4)
                }}</template>
              </el-table-column>
              <el-table-column align="center" width="60" label="预警亮灯">
                <template slot-scope="scope">
                  <img :src="dataLamp(scope.row.allDegreeCaveat)" />
                </template>
              </el-table-column>
              <el-table-column align="center" width="60" label="审核状态">
                <template slot-scope="scope">{{
                  degreeStatus(scope.row.allDegreeStatus)
                }}</template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <!-- </el-scrollbar> -->
      </div>
    </el-card>
    <!-- 弹出框 -->
    <el-dialog title="预警亮灯设置" :visible.sync="dialogAudit" width="30%" center>
      <div style="text-align: center;">
        <b>选择季度:</b>
        <el-select class="userIntSize" v-model="allNumber" clearable>
          <el-option
            v-for="(item, index) in quarterList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <div class="light">
          <b>是否预警亮灯:</b>
          <span>
            <el-radio v-model="radio1" label="1" border
              >黄灯
              <img src="../../assets/img/yellowLight.png" alt="" />
            </el-radio>
            <el-radio v-model="radio1" label="2" border
              >红灯
              <img src="../../assets/img/redLight.png" alt="" />
            </el-radio>
            <el-radio v-model="radio1" label="0" border
              >绿灯
              <img src="../../assets/img/lv.png" alt="" />
            </el-radio>
          </span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAudit = false">取 消</el-button>
        <el-button type="primary" @click="setMonthly()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog title="通知" :visible.sync="dialoginform" width="30%" center>
      <div style="text-align: center;">
        <b>选择季度:</b>
        <el-select class="userIntSize" v-model="allNumber" clearable>
          <el-option
            v-for="(item, index) in quarterList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialoginform = false">取 消</el-button>
        <el-button type="primary" @click="setMessage()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog title="修改预警亮灯绿色" :visible.sync="dialoglv" width="30%" center>
      <div style="text-align: center;">
        <b>选择季度:</b>
        <el-select class="userIntSize" v-model="allLv" clearable>
          <el-option
            v-for="(item, index) in quarterList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialoglv = false">取 消</el-button>
        <el-button type="primary" @click="setUnify()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio1: "0",
      tableData: [],
      dialogVisible: false,
      subtasksId: "",
      departmentName: "",
      allNumberId: "",
      allNumber: "",
      allLv: "",
      message: "",
      dialogAudit: false,
      dialoginform: false,
      currVal: {},
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "全年" }
      ],
      form: {
        id: "",
        region: ""
      },
      dialogVisibles: false,
      quarterLists: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "全年" }
      ],
      quarter: "",
      dialoglv: false
    };
  },
  mounted() {
    this.subtasksId = this.$route.query.id;
    this.departmentName = this.$route.query.departmentName;
    this.getListByPage();
  },
  methods: {
    setLv() {
      this.dialoglv = true;
    },
    setUnify() {
      if (this.allLv == "") {
        this.$message.error("请选择季度");
        return;
      }
      let _obj = {
        taskId: +this.subtasksId,
        quarter: this.allLv
      };
      this.$axios
        .post(`/distribution/updateSocre`, _obj)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.dialoglv = false;
            this.$message({
              message: "数据更新成功",
              type: "success"
            });
            this.getListByPage();
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    dataInform() {
      this.dialoginform = true;
    },
    setMonthly(){
      if (this.allNumber == "") {
        this.$message.error("请选择季度");
        return;
      }
      let _obj = {
        id: this.currVal.id,
        lamp: this.radio1,
        quarter: this.allNumber
      };
      this.$axios
        .post(`/distribution/updateLamp`, _obj)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.dialogAudit = false;
            this.$message({
              message: "数据更新成功",
              type: "success"
            });
            this.getListByPage();
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },



    // 弹出框确定按钮
    setMessage(val) {
      if (this.allNumber == "") {
        this.$message.error("请选择季度");
        return;
      }
      let _obj = {
        taskId: +this.subtasksId,
        quarter: this.allNumber
      };
      this.$axios
        .post(`/lightLogController/lightLogAdd`, _obj, 2)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.dialoginform = false;
            this.$message({
              message: "数据更新成功",
              type: "success"
            });
            this.getListByPage();
          } else {
            this.$message.error(`${res.msg}`);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //  点击列表预警亮灯设置
    dataWarnings(val) {
      this.radio1 = "0";
      this.allNumber = "";
      this.currVal = val;
      this.dialogAudit = true;
    },
    // 预警亮灯
    dataLamp(val) {
      let _url = "";
      if (val == 1) {
        _url = require("../../assets/img/yellowLight.png");
      } else if (val == 0 || val == null) {
        _url = require("../../assets/img/lv.png");
      } else {
        _url = require("../../assets/img/redLight.png");
      }
      return _url;
    },
    degreeStatus(val) {
      let _text = "";
      switch (val) {
        case 0:
          _text = "未提交";
          break;
        case 1:
          _text = "待审核";
          break;
        case 2:
          _text = "通过";
          break;
        default:
          _text = "驳回";
      }
      return _text;
    },
    // 保留小数点后两位
    decimal(val) {
      let _val = val * 100;
      _val = _val.toFixed(2);
      return _val + "%";
    },
    // 申请审核
    addPass(val, text) {
      this.id = val.id;
      this.type = text;
      this.currVal = val;
      this.dialogVisible = true;
    },
    // 获取数据列表
    getListByPage() {
      let _obj = {
        taskId: +this.subtasksId
      };
      this.$axios
        .post(`/distribution/getList`, _obj)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    showtable() {
      this.dialogVisibles = true;
      this.quarter = 1;
      setTimeout(() => {
        this.changeSelsct(1);
      }, 1000);
    },
    handleClose(done) {
      done();
    },
    changeSelsct(data) {
      // console.log(data)
      var name = [];
      var value = [];
      this.tableData.forEach(i => {
        // i.targetName.forEach(item=>{
        if (data == 1) {
          name.push(i.targetName);
          value.push(i.degree1 * 100);
        } else if (data == 2) {
          name.push(i.targetName);
          value.push(i.degree2 * 100);
        } else if (data == 3) {
          name.push(i.targetName);
          value.push(i.degree3 * 100);
        } else if (data == 4) {
          name.push(i.targetName);
          value.push(i.degree4 * 100);
        }
        // })
      });
      // console.log(name)
      let YmyChart = this.$echarts.init(document.getElementById("YmyChart"));
      // 绘制图表
      YmyChart.setOption({
        title: {
          text: `“十项重点工作” ${data == 4 ? "全年" : data + "季度"}工作进度`,
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}%"
        },
        grid: {
          left: "0",
          right: "4%",
          top: "20%",
          bottom: "0",
          containLabel: true
          // y2:150
        },
        xAxis: {
          data: name,
          type: "category",
          // position:'bottom',
          axisLabel: {
            textStyle: {
              //文字样式
              color: "#8c8c8c",
              fontSize: "13"
            },
            //X轴刻度配置
            interval: 0,
            // formatter: function(value) {
            //   return value.split('').join('\n')
            // },
            rotate: 75
            // margin:100,
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} %"
          }
        },
        series: [
          {
            data: value,
            type: "bar"
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.userIntSize {
  width: 60% !important;
}
#YmyChart {
  width: 100%;
  height: 580px;
  /* margin:50px 0; */
}
.light {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.light img {
  float: right;
  width: 16px;
  height: 16px;
  position: relative;
  left: 7px;
  top: -2px;
}
.light .el-radio {
  margin-right: 0px;
}
.reject {
  display: block;
  margin-bottom: 10px;
}
.describe {
  padding: 4px 4px;
  float: right;
}
</style>
